<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <title></title>
</head>
<body>
<div id="canvas-warp">
    <canvas id="canvas"></canvas>
</div>

<script>
    /**
     * 语法: CanvasRenderingContext2D.arcTo( x1, y1, x2, y2, radius )
     *
     * 描述:
     *
     * 该方法用于绘制圆弧
     * 绘制的规则是当前位置与第一个参考点连线, 绘制的弧与该直线相切.
     * 同时连接两个参考点, 圆弧根据半径与该连线相切
     * @type {Element}
     */
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;
    canvas.style.border = "1px solid #000";

    //起始点 ( 100, 100 ), 那么绘制其点. 颜色设置为红色
    ctx.fillStyle = 'red';
    ctx.fillRect( 100 -4 , 100 -4 , 8 , 8);


    //两个参考点分别为 ( 100, 300 ) 和 ( 300, 300 ), 绘制出该点
    ctx.fillRect( 100 - 4, 300 - 4, 8, 8 );
    ctx.fillRect( 300 - 4, 300 - 4, 8, 8 );


    //连接两个参考点
    ctx.beginPath();
    ctx.strokeStyle = 'red';
    ctx.moveTo(100 , 300);
    ctx.lineTo( 300 , 300);
    ctx.stroke();

    //调用 arcTo 方法绘制圆弧. 记得将起始点设置为 ( 100, 100 )
    ctx.beginPath();
    ctx.strokeStyle = 'blue';
    ctx.moveTo(100,100);
    ctx.arcTo( 100 , 300 , 300 , 300 , 100);
    ctx.stroke();
</script>
</body>
</html>